<script setup>
import { onMounted,ref} from "vue"
import {userRegisterService,userLoginService,captchaService,} from "@/api/user"
import { showNotify } from 'vant';
//引入tokenStore
import {useTokenStore} from "@/stores/token.js"

const tokenStore = useTokenStore()
//引入路由
import {useRouter} from 'vue-router'
const router = useRouter()
//注册页为true,登录页为false
const isRegister = ref(false)
//验证码图片
const captchaUrl= ref()
//定义注册数据模型
const registerData = ref({
  userAccount: '',
  userPassword: '',
  checkPassword: '',
  code:'',
})
//清除注册数据
const clearRegisterData = ()=>{
  registerData.value = {
    userAccount: '',
    userPassword: '',
    checkPassword: '',
    code:'',
  }
}
//验证规则
const usernamePattern = /^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{4,15}$/;
const passwordPattern = /^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{8,15}$/;
const validator = (val) => registerData.value.userPassword === val;


//调用后台接口完成注册
const register = async()=>{
  let result = await userRegisterService(registerData.value);
    showNotify({ type: 'success', message: result.description?result.description:"注册成功！"});
    clearRegisterData()
    isRegister.value = false
}
//登录
//绑定数据，复用注册表单数据模型
//复用注册表单校验规则
const login=async()=>{
  let result = await userLoginService(registerData.value)
  if(result.code===0){
    showNotify({ type: 'success', message: result.description?result.description:"登录成功" });

    tokenStore.setToken(result.data)
    console.log(result.data);
    
    // 跳转到首页
    router.push('/index')
  }
  getCaptcha();
}


  //获取验证码
  const getCaptcha = async()=>{
  let result = await captchaService() 
  captchaUrl.value = result.data
  
}
onMounted(()=>{
// 在这里调用getCaptcha函数,不调用钩子函数不生效
getCaptcha();

})
//更新验证码
const refreshCaptcha = async()=>{
  let result = await captchaService() 
  captchaUrl.value = result.data
}
</script>
<template >
  <div  id="building">
    <div style="height:35vh;line-height:35vh;text-align:center;">
      <span style="font-size:1.5rem;margin-bottom:15vh;color:#000;" ><b>oa办公系统</b></span>
    </div>
    <div class="loginrigster">
      <!-- 注册 -->
      <van-form @submit="onSubmit" v-if="isRegister" > 
        <van-cell-group inset>
          <van-field
            required
            v-model="registerData.userAccount"
            name="账号"
            label="账号"
            placeholder="账号"
            :rules="[{ required: true, message: '请填写账号' },{pattern:usernamePattern,message:'长度为4-15位非空字符'}]"
          />
          <van-field
            required
            v-model="registerData.userPassword"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' },{pattern:passwordPattern,message:'长度为8-15位非空字符'}]"
          />
          <van-field
            required
            v-model="registerData.checkPassword"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="确认密码"
            :rules="[{ required: true, message: '请填写确认密码' },{pattern:passwordPattern,message:'长度为8-15位非空字符'},{validator,message:'两次密码不一致' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" :disabled="registerData.userAccount.length<4 || registerData.userAccount.length>15 ||registerData.userPassword.length<8 ||registerData.userPassword.length>15 ||registerData.checkPassword.length<8 ||registerData.checkPassword.length>15 ||registerData.userPassword !== registerData.checkPassword" @click="register">
            注册
          </van-button> 
          <div class="reg">
                <div @click="isRegister=false;clearRegisterData()" style="font-size: small; margin-top: 20px;text-align:center">返回登录</div>
            </div>
        </div>
      </van-form>
<!-- 登录 -->
      <van-form @submit="onSubmit" v-else>
        <van-cell-group inset>
          <van-field
           v-model="registerData.userAccount"
            name="账号"
            label="账号"
            placeholder="账号"
            :rules="[{ required: true, message: '请填写账号' },{pattern:usernamePattern,message:'长度为4-15位非空字符'}]"
          />
          <van-field
            v-model="registerData.userPassword"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' },{pattern:passwordPattern,message:'长度为8-15位非空字符'}]"
          />
           <!-- 新增验证码输入行 -->
          <div style="display: flex; align-items: center;">
            <van-field
              v-model="registerData.code"
              name="验证码"
              label="验证码"
              placeholder="输入验证码"
              :rules="[{ required: true, message: '请输入验证码' }]"
            />
            <van-image
              :src="captchaUrl"
              width="100"
              height="32"
              @click="refreshCaptcha"
              style="margin-left: 10px; border: 1px solid #eee;"
            />
          </div>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" @click="login" :disabled="registerData.userAccount.length<4 || registerData.userAccount.length>15 ||registerData.userPassword.length<8 ||registerData.userPassword.length>15" >
            登录
          </van-button>
          <div class="reg">
                <div @click="isRegister=true;clearRegisterData()" style="font-size: small; margin-top: 20px;text-align:center">没有账号？立即注册</div>
            </div>
        </div>
      </van-form>
    </div>
  </div>
</template>
<style>
#building{
  background:url("../images/oa.png");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}
</style>
  